<template>
  <div class="addTripPeople">
    <van-nav-bar
      class="header"
      :fixed="true"
      left-arrow
      title="搜索出行人"
      :border="false"
      @click-left="onBack"
    >
    </van-nav-bar>
    <BarInput
      :placeholder="state.placeholder"
      @getBarInputValue="getBarInputValue"
    />
    <div class="people-wrapper">
      <div class="search-info" v-if="!state.key_word">
        <van-empty image="search" description="请输入关键字进行搜索" />
      </div>
      <div style="background: #fff;">
        <CommonPassengerPeopleList
          v-for="item in state.people_list"
          :key="item.id"
          :list="item"
          :num="state.change_people_list.length"
          :total="18"
          @getChangePeople="getChangePeople"
        />
      </div>
      <div
        class="search-info"
        v-if="state.key_word && !state.people_list.length"
      >
        <van-empty description="未匹配到数据，请更换关键字进行搜索" />
      </div>
    </div>
  </div>
</template>

<script setup>
import BarInput from "../../BarInput/BarInput.vue";
import CommonPassengerPeopleList from "../CommonPassengerPeopleList/CommonPassengerPeopleList.vue";

import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, onMounted, getCurrentInstance } from "vue";

const router = useRouter();
const store = useStore();
const { proxy } = getCurrentInstance();
const emit = defineEmits(["getSearchPeople", "getSearchHistoryPeople"]);

const state = reactive({
  placeholder: "请输入搜索关键词",
  key_word: "",
  people_list: [],
  change_people_list: [],
  history_people: []
});

onMounted(() => {
  let history_people_local =
    localStorage.getItem("h5_hotel_search_history_trip_people") || "";
  state.history_people = history_people_local
    ? JSON.parse(history_people_local)
    : [];
});

// 获取 barinput 的值
const getBarInputValue = val => {
  state.key_word = val;
  if (!val) {
    state.people_list = [];
    state.change_people_list = [];
    return false;
  }
  searchPeople();
};

const searchPeople = async () => {
  const url = "/security/v1/commonPassenger/searchPassengerList";
  const data = {
    member_id: localStorage.getItem("memberId"),
    is_private: store.state.publicAndPrivateFlag === "0" ? false : true, //因公false  因私true,
    key_word: state.key_word,
    business_type: 3
  };
  let res = await proxy.$axiosJson(url, data);
  if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
    res.data.passenger_results.forEach(item => {
      item.check = false;
      let obj = {
        certification_name: item.certification_name,
        certification_number: item.certification_number
      };
      item.common_passenger_certificates = [];
      item.common_passenger_certificates.push(obj);
    });
    state.people_list = res.data.passenger_results;

    if (store.state.changePeopleList.length != 0) {
      store.state.changePeopleList.forEach(item => {
        state.people_list.forEach(val => {
          if (item.member_id == val.member_id) {
            val.check = true;
          }
        });
      });
    }
  }
};

// 获取已经选中的出行人
const getChangePeople = val => {
  state.change_people_list = [val];
  onSure();
};

const getHistoryPeople = val => {
  emit("getSearchHistoryPeople", val);
  onBack();
};

const onBack = () => {
  router.back();
};

const onSure = () => {
  emit("getSearchPeople", state.change_people_list);
  onBack();
};
</script>

<style scoped lang="less">
.addTripPeople {
  :deep(.header) {
    position: static;
    box-shadow: 0px 0px 11px -3px rgba(0, 0, 0, 0.33);
    .van-icon {
      color: #000000;
    }
    .header-right {
      .sc(14px, #208cff);
      font-weight: 500;
    }
  }
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 110;
  background: #f7f7f7;
  .people-wrapper {
    background: #ffffff;
    position: fixed;
    top: 95px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    overflow-y: scroll;
    .history {
      padding: 15px;
      .title {
        font-size: 14px;
        color: #333;
        margin-bottom: 20px;
      }
      .history-item {
        padding: 0 10px 10px 0;
        font-size: 12px;
        color: #999;
      }
    }
  }
  .history-info {
    text-align: center;
    line-height: 80px;
    font-size: 16px;
    color: #999999;
  }
}
</style>
